var SetMaterialTable = function () {
  var template = /*html*/ `
    <div class="material-config-setting" v-loading.fullscreen.lock="loading">
      <div class="handle">
        <el-button type="primary" size="medium" @click="addDialogVisible=true">添加配置</el-button>
      </div>
      <div class="material-config-table-div">
        <el-table fit stripe border :data="materialTableList" style="width:100%" height="parent">
          <el-table-column prop="materialType" label="物料类型" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="是否报工" min-width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isReport==1">是</span>
              <span v-if="scope.row.isReport==2">否</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="是否采购" min-width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isPurchase==1">是</span>
              <span v-if="scope.row.isPurchase==2">否</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="整架是否显示" min-width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.allIsReport==1">是</span>
              <span v-if="scope.row.allIsReport==2">否</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="140px" header-align="center">
            <template slot-scope="scope">
              <span class="table-btns">
                <el-button type="primary" size="mini" @click="updateDialog(scope.row)">修改</el-button>
                <el-button type="danger" size="mini" @click="deleteMaterialTable(scope.row)">删除</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>

      <el-dialog title="修改物料属性" :visible.sync="updateDialogVisible">
        <el-form label-width="auto">
          <el-form-item label="物料类型">
            <span>{{updateParam.materialType}}</span>
          </el-form-item>
          <el-form-item label="是否报工">
            <el-select v-model="updateParam.isReport" placeholder="请选择是否报工">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否采购">
            <el-select v-model="updateParam.isPurchase" placeholder="请选择是否采购">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="整架是否显示">
            <el-select v-model="updateParam.allIsReport" placeholder="请选择整架是否显示">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateMaterialTreeData()">确定</el-button>
        </div>
      </el-dialog>

      <!-- 添加弹出框 -->
      <el-dialog title="添加物料属性" :visible.sync="addDialogVisible">
        <el-form label-width="auto">
          <el-form-item label="物料类型" prop="addParam.materialType">
            <el-select filterable v-model="addParam.materialType" class="form-input">
              <el-option v-for="materialType in materialTypeArray" :key="materialType" :value="materialType" :label="materialType"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否报工">
            <el-select v-model="addParam.isReport" placeholder="请选择是否报工">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否采购">
            <el-select v-model="addParam.isPurchase" placeholder="请选择是否采购">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="整架是否显示">
            <el-select v-model="addParam.allIsReport" placeholder="请选择整架是否显示">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addMaterialTreeData()">确定</el-button>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    data: function () {
      return {
        loading: false,
        updateDialogVisible: false,
        addDialogVisible: false,
        materialTableList: [],
        materialTypeArray: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 15
        },
        updateParam: {},
        addParam: {
          id: '',
          materialType: '',
          isReport: 1,
          isPurchase: 1,
          allIsReport: 1
        }
      };
    },
    created: function () {
      var self = this;
      this.loading = true;
      SysUtil.getUser().then(function (user) {
        self.loading = false;
        self.setMaterialTable(true);
        self.setMaterialType();
      })
    },
    methods: {
      setMaterialType: function () {
        var self = this;
        this.loading = true;
        ajaxRequest("basicData/getRowMaterialType", {
          "isvolid": 1
        }, true).then(function (res) {
          self.loading = false;
          self.materialTypeArray = res;
        }).catch(function () {
          self.loading = false;
        });
      },
      addMaterialTreeData: function () {
        var self = this;
        var postData = self.addParam;
        if (postData.materialType == '') {
          self.$alert('请选择物料类型', '提示', {});
          return false;
        }
        this.loading = true;
        ajaxRequest("structureTree/addMaterialTreeData", postData, true).then(function (res) {
          self.loading = false;
          self.$alert(res, '信息', {
            callback: function () {
              self.setMaterialTable();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
        self.addDialogVisible = false;
      },
      updateMaterialTreeData: function () {
        var self = this;
        var postData = self.updateParam;
        this.loading = true;
        ajaxRequest("structureTree/updateMaterialTreeData", postData, true).then(function (res) {
          self.loading = false;
          self.$alert(res, '信息', {
            callback: function () {
              self.setMaterialTable();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
        self.updateDialogVisible = false;
      },
      updateDialog: function (row) {
        this.updateDialogVisible = true;
        this.updateParam = row;
      },
      setMaterialTable: function () {
        var self = this;

        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        }
        this.loading = true;
        ajaxRequest("structureTree/getMaterialTreeData", postData, true).then(function (res) {
          self.materialTableList = res.returnData;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },
      deleteMaterialTable: function (row) {
        var postData = {
          id: row.id
        }
        var self = this;
        ajaxRequest("structureTree/deleteMaterialTreeData", postData, true).then(function (res) {
          self.loading = false;
          self.$alert(res, '信息', {
            callback: function () {
              self.setMaterialTable();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      pageChange: function () {
        this.setMaterialTable();
      }
    },
    template: template
  };
}();
